<template>
  <div id="Menu">
    <!-- 
      功能：
      1.处理预约 handleAppointments
      2.学生/教师认证申请审核 UserManagement
      3.会议室管理 roomManagement
    -->
    <el-menu :router='true' :default-active="path" class="el-menu-vertical-demo" background-color="#304156"
      text-color="#fff" active-text-color="#409EFF">
      <template v-for="(item, index) in menus">
        <div :key="index + '' "  >
        <el-menu-item :index="item.path"  v-if="!item.meta.showTwo">
          <i :class="item.icon" class="icon"></i>
          <span slot="title">{{ item.meta.title }}
          </span>
        </el-menu-item>
      </div> 
      </template>
      
      <!-- <el-submenu index="1" v-if="orgMenus">
        <template slot="title">
          <i class="iconfont icon-bingli icon"></i>
          <span>机构管理</span>
        </template>
        <div v-for="(item, index) in orgMenus" :key="index + ''">
          <el-menu-item :index="item.path">
            <i :class="item.icon" class="icon"></i>
            <span slot="title">{{ item.meta.title }}
            </span>
          </el-menu-item>
        </div>
      </el-submenu> -->
    </el-menu>

  </div>
</template>

<script>
export default {
  name: 'Menu',
  data() {
    return {
      path: null,
      menus: [],
      adminInfo: null,
      orgMenus: [],
    }
  },
  created() {
    // this.path = window.location.pathname;
    console.log(window.location.pathname);
    // console.log(this.$store.state.adminInfo);
    this.adminInfo = this.$store.state.adminInfo;
    console.log('路由信息：', this.$router.options);
    // 目前菜单较少
    this.menus = [...this.$router.options.routes[2].children];
    console.log("this.menus");
    console.log(this.menus);
    this.path = this.menus[0].path;
    // this.orgMenus = this.menus[1].children;
    // console.log("this.orgMenus");
    // console.log(this.orgMenus);
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/icon/iconfont.css';

#Menu {
  height: calc(100vh - 60px);

  // width: 120px;
  .icon {
    padding-right: 10px;
    // color: #fff;
  }

  .el-menu {
    text-align: left;
    border-right: none;
  }
}
</style>